<template>
  <div  >
  <header class="in-banner bg-orange">
    <div class="bg-333 hei40">
      <div class="container">
        <div class="pull-left mar-t8"><span class="ft-ochre"><a href="#">数字后勤服务大厅</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
          class="ft-grey8"><a href="#">运驾中心</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#">服务监督</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a
          href="#">网络报修</a></span></div>
        <!--user login-->
        <div class="user-box user-txt pull-right mar-t8">
          <div class="b-login hidden"><!--未登录-->
            <i></i>
            <a href="#">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">注册</a>
          </div>
          <div class="a-login"><!--已登录-->
            <i class="on"><img src="../../static/img/temp03.jpg" width="24" height="24" class="img-circle"></i>
            <a href="#">Chenshangcai</a>
          </div>
        </div>
        <!--/user-->
      </div>
    </div>
    <div class="container hei90">
      <!--logo-->
      <div class="logo pull-left mar-t15"></div>
      <!--search-->
      <div class="search pull-right mar-t30 mar-l20">
        <div class="input-group">
          <input type="text" class="form-control" @click="getFoodVariety(1,16,null,productsId,searchData,storeId)" v-model="searchData" value="搜索美食">
          <span class="input-group-btn">
              <button class="btn" type="button"><img src="../../static/img/search.png" width="18" height="18"
                                                     alt=""/></button>
            </span>
        </div>
      </div>
      <!--/search-->
      <!--.menu-->
      <div class="pull-right">
        <nav class="pull-left mar-t30" role="navigation">
          <ul class="nav-menu nav-menu-tabs">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">餐厅介绍</a>
              <ul class="dropdown-menu">
                <li><a href="#">桃园食堂</a></li>
                <li><a href="#">橘园食堂</a></li>
                <li><a href="#">梅园食堂</a></li>
                <li><a href="#">杏园食堂</a></li>
                <li><a href="#">李园食堂</a></li>
                <li><a href="#">禾丰楼餐厅</a></li>
                <li><a href="#">楠园一食堂</a></li>
                <li><a href="#">楠园二食堂</a></li>
                <li><a href="#">竹园食堂</a></li>
              </ul>
            </li>
            <li><a href="#">推荐菜品</a></li>
            <li><a href="#">我的订单</a></li>
          </ul>
        </nav>
        <div class="pull-left s-cart mar-t30"><i></i><span class="pull-left">购物车</span> <em>12</em></div>
      </div>
      <!--/menu-->
    </div>
  </header>
  <div class="container mar-t30">
    <div class="row">
      <div class="col-md-12">
        <div class="list-ti-box pad10-20">
          <div class="pull-left"><img src="../../static/img/img02.png" width="110" height="110" class="img-circle"/>
          </div>
          <div class="pull-left mar-l20">
            <p class="ft18 mar-t10 ft-ochre">{{storeBasicInfo.storeName}}<span class="ft14">(北区)</span></p>
            <div class="icon-stars">
              <div>
                <!--<p><a></a><a></a><a></a><a></a><a></a></p>-->
                <i style="width:90px;"></i>
              </div>
              <span class="txt"> {{storeBasicInfo.score}}星</span>
            </div>
            <p class="clearfix"></p>
            <p class="ft-grey6 mar-t10 pull-left">公告：{{storeBasicInfo.notice}}</p>
          </div>
          <div class="pull-right mar-t20">
            <ul class="pull-left mar-r80">
              <p class="ft-grey8">月售</p>
              <p class="mar-t8"><span class="ft24">{{storeBasicInfo.monthSales}}</span>单</p>
            </ul>
            <ul class="pull-left mar-r80">
              <p class="ft-grey8">起送</p>
              <p><span class="ft30">{{storeBasicInfo.initiatePrice}}</span>元</p>
            </ul>
            <ul class="pull-left mar-r80">
              <p class="ft-grey8">配送费</p>
              <p><span class="ft30">{{storeBasicInfo.dphPrice}}</span>元</p>
            </ul>
          </div>
          <p class="clearfix"></p>
        </div>
      </div>
    </div>
    <div class="row mar-t20">
      <!--left-->
      <div class="col-md-9">
        <!--tab-->
        <div class="carte-tab bg-white mar-b1">
          <ul class="icon-box ft16">
            <li :class="displayFood?'active':''"><a href="javascript:void(0)"  @click="changeDiv('div_1')">点菜单</a></li>
            <li :class="displayPing?'active':''"><a href="javascript:void(0)"  @click="changeDiv('div_2')">评价</a></li>
            <li :class="displayStore?'active':''"><a href="javascript:void(0)" @click="changeDiv('div_3')">餐厅介绍</a></li>
          </ul>
        </div>
        <p class="clearfix"></p>
        <div class="tab-content">

          <!-- .tab-点菜单 -->
          <div class="active tab-pane pad-t20" v-show="displayFood">

            <div class="bg-white pad10-20 carte-tag" id="carte" style="width: 870px; z-index:5;">
              <a href="javascript:void(0)" v-for="item in productInfo" :class="productsId==item.id?'on':''"
                 @click="changeProduct(item.id)">{{item.productsname}}</a>
            </div>
            <p class="hei20"></p>


            <div class="foods" v-for="item in foodsData">


              <p class="ft18 mar-t10" id="target1">{{item.productsName}}</p>
              <div class="row carte-list">
                <div class="col-md-3" v-for="child in item.foodBasicInfos">
                  <div class="list-box">
                    <img :src="child.coverPhoto" width="165" height="165" class="img-circle-3"/>
                    <p>{{child.foodName}}</p>
                    <p class="ft-grey8 ft12">月售<span>{{child.count}}份</span></p>
                    <div class="mar-t10">
                      <p class="pull-left ft-red ft16 ft-a ft-bold600">¥{{child.price}}</p>
                      <p class="pull-right">&nbsp;&nbsp;<a @click="addShopCar(child)"><img src="../../static/img/icon-add.png" width="24"
                                                                         height="24"/></a></p>
                    </div>
                    <p class="clearfix"></p>
                  </div>
                </div>
              </div>

            </div>
          </div>

<!--          <p align="center"><img src="../../static/img/loading.gif" width="32" height="32" alt=""/> 加载中...</p>-->

          <!-- /.tab-点菜单 -->
          <!-- .tab-评价 -->
          <div class=" active tab-pane" v-show="displayPing" >
            <div class="bg-white mar-t1 pad10-20">
              <!--暂无评价-->
              <p class="msg hidden">还没有评论，快来 <a href="#">点单</a> 进行抢沙发吧！</p>
              <p class=" carte-tag">
                <a  :class="sel==1?'on':''" @click="selComment(1)" >全部（{{commentCount.totalCount}}）</a>
                <a  :class="sel==2?'on':''"  @click="selComment(2)">满意（{{commentCount.pleasedCount}}）</a>
                <a  :class="sel==3?'on':''"  @click="selComment(3)">不满意（{{commentCount.dissatisfiedCount}}）</a>
                <a  :class="sel==4?'on':''"   @click="selComment(4)">有图（{{commentCount.pictureCount}}）</a>
              </p>
            </div>
            <div class="bg-white pad20 mar-t1" v-for="item in pageCommentData.records">
              <div class="media-left"><img class="media-object img-circle" :src="item.userPhoto"
                                           width="60"></div>
              <div class="media-body">
                <div class="int-light">
                  <li>
                    <span class="ft16 pull-left">{{item.userName}}</span>
                    <span class="pull-right ft-grey8 ft12">{{item.dateTime}}发布</span>
                    <p class="clearfix"></p>
                  </li>
                  <div>
                    <el-rate
                      v-model="item.score"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}星">
                    </el-rate>
                  </div>
                  <p class="clearfix"></p>
                  <li class="ft12 mar-t8"><span class="ft-orange">{{item.userAccount}}：</span>{{item.content}}
                  </li>
                  <li class="mar-t10" >
                    <span><img v-for="img in item.pictures" :src="img" width="60" height="60" alt=""/></span>&nbsp;&nbsp;&nbsp;&nbsp;
                  </li>
                  <li class="line01 mar-t20" v-show="item.replay!=null">
                    <span class="ft-orange">商家回复：</span>
                    {{item.replay}}
                  </li>
                </div>
              </div>
            </div>
<!--            <div class="bg-white pad20 mar-t1">-->
<!--              <div class="media-left">-->
<!--                <img class="media-object img-circle" src="../../static/img/user-icon.png"-->
<!--                                           width="60">-->
<!--              </div>-->
<!--              <div class="media-body">-->
<!--                <div class="int-light">-->
<!--                  <li>-->
<!--                    <span class="ft16 pull-left">匿名用户</span>-->
<!--                    <span class="pull-right ft-grey8 ft12">10:05发布</span>-->
<!--                    <p class="clearfix"></p>-->
<!--                  </li>-->
<!--                  <div>-->
<!--                    <el-rate-->
<!--                      v-model="value"-->
<!--                      disabled-->
<!--                      show-score-->
<!--                      text-color="#ff9900"-->
<!--                      score-template="{value}">-->
<!--                    </el-rate>-->
<!--                  </div>-->

<!--                  <p class="clearfix"></p>-->
<!--                  <li class="ft12 mar-t8"><span class="ft-orange">黄金小馒头：</span>送货真的快得让我尴尬 点好还没起床就到了。黄金咖喱猪排是新品吧，肉很多，好吃!-->
<!--                  </li>-->
<!--                  <li class="mar-t10 hidden">-->
<!--                    <span><img src="../../static/img/img-temp01.png" width="60" height="60" alt=""/></span>&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                    <span><img src="../../static/img/img-temp02.png" width="60" height="60" alt=""/></span>&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                    <span><img src="../../static/img/img-temp03.png" width="60" height="60" alt=""/></span>-->
<!--                  </li>-->
<!--                  <li class="line01 mar-t20 hidden">-->
<!--                    <span class="ft-orange">商家回复：</span>亲。感谢您的好评。-->
<!--                  </li>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

            <!--更多评价-->
            <p class="msg" @click="changeCommentSize">已有{{pageCommentData.total}}人参与，点击查看更多精彩评论</p>
          </div>
          <!-- /.tab-评价 -->

          <!-- .tab-餐厅介绍 -->
          <div class="active tab-pane" v-show="displayStore" id="tab_3">
            <div class="bg-white mar-t1 pad20">
              <p class="ft16 ft-bold600">商家介绍</p>
              <p>{{storeIntroduce.storeintro}}</p>
              <p class="mar-t10">
                <span><img :src="storeIntroduce.logo" width="80" height="80" alt=""/></span>&nbsp;&nbsp;&nbsp;&nbsp;
              </p>
            </div>
            <div class="mar-t1 bg-white pad10-20">
              <div class="media-left"><img class="media-object" src="../../static/img/icon-form01.png" width="16"></div>
              <div class="media-body"><span>地址：</span>{{storeIntroduce.address}}</div>
            </div>
            <div class="mar-t1 bg-white pad10-20">
              <div class="media-left"><img class="media-object" src="../../static/img/icon-form02.png" width="16"></div>
              <div class="media-body"><span>电话：</span>{{storeIntroduce.phone}}</div>
            </div>
            <div class="mar-t1 bg-white pad10-20">
              <div class="media-left"><img class="media-object" src="../../static/img/icon-form03.png" width="22"></div>
              <div class="media-body"><span>配送服务：</span>由 <span class="ft-orange">{{storeIntroduce.dispatching}}</span> 提供配送服务</div>
            </div>
            <div class="mar-t1 bg-white pad10-20">
              <div class="media-left"><img class="media-object" src="../../static/img/icon-form04.png" width="18"></div>
              <div class="media-body"><span>配送时间：</span>{{storeIntroduce.dhptime}}</div>
            </div>
            <div class="mar-t8 bg-white pad10-20">
              <div class="media-left"><img class="media-object" src="../../static/img/icon-order03.png" width="16">
              </div>
              <div class="media-body">餐厅资质</div>
            </div>
            <div class="bg-white mar-t1 pad20">
              <div class="pull-left mar-l30">
                <p>营业执照</p>
                <p><img :src="storeIntroduce.license" width="278" height="202" alt=""/></p>
              </div>
              <div class="pull-left mar-l30">
                <p>餐饮服务许可证</p>
                <p><img :src="storeIntroduce.permit" width="278" height="202" alt=""/></p>
              </div>
              <p class="clearfix"></p>
            </div>
          </div>
          <!-- /.tab-餐厅介绍 -->
        </div>
      </div>
      <!--right-->
      <div class="col-md-3 tab-content">
        <div class="carte-tel bg-orange">
          <p class="bg-ochre hei3"></p>
          <div class="line-r pull-left pad20"><img src="../../static/img/callin.png" width="40" height="40" alt=""/>
          </div>
          <div class="pull-left mar-l30 mar-t15">
            <p>订餐电话</p>
            <p class="ft18 ft-a">{{storeBasicInfo.orderPhone}}</p>
          </div>
          <p class="clearfix"></p>
        </div>
        <p class="hei20"></p>
        <!--点餐单-->
        <div class="act" v-show="displayFood" id="div_1">
          <div class="shopping-cart" id="nav-shopping">
            <!--暂无点菜-->
            <div v-show="shopCarForm.foods.length==0">
              <div class="footer">
                <div class="fl">
                  <div class="fl" data-toggle="collapse" data-target="#demo-1"></div>
                  <div class="logo icon"></div>
                  <div class="brief-order icon-down1" style="display: none;">
                    <!--<span class="count"></span>-->
                    <span class="price"><i>购物车是空的</i></span>
                  </div>
                </div>
                <div class="fr">
                  <input class="go-pay borderradius-2" type="submit" value="立即下单" style="display: inline-block;">
                </div>
              </div>
              <div id="demo-1" class="order-list collapse in text-center">
                <p class="hei40"></p>
                <p><img src="../../static/img/shopping-cart.png" width="120" height="106" alt=""/></p>
                <p class="ft-grey8 mar-t8">您还没点餐,购物车是空的！</p>
                <p class="hei20"></p>
              </div>
            </div>
            <!--点菜list-->
            <div v-show="shopCarForm.foods.length>0">
              <div class="footer">
                <div class="fl">
                  <div class="btn-shopping-up" data-toggle="collapse" data-target="#demo"></div>
                  <div class="logo icon"></div>
                  <div class="brief-order icon-down" style="display: none">
                    <span class="count">11</span>
                    <span class="price"><i>¥</i>17</span>
                  </div>
                </div>
                <div class="fr">
                  <a class="ready-pay borderradius-2" href="javascript:;" style="display: none;">差<span data-left="9"
                                                                                                        class="margintominprice">0</span>元起送</a>
                  <router-link :to="{path:'/shopping_payment',query:{
                    storeName:storeBasicInfo.storeName,
                    packCost:shopCarInfo.packCost,
                    deliveryCost:shopCarInfo.deliveryCost,
                    orderForm:{
                       storeId:storeId,
                       price:shopCarInfo.totalPrice,
                       foods:shopCarInfo.foods
                    }

                  }}">
                    <input class="go-pay borderradius-2" type="submit"  value="立即下单"
                                      style="display: inline-block;">
                  </router-link>
                  <input type="hidden" class="order-data" name="shop_cart">
                </div>
              </div>
              <div id="demo" class="order-list collapse in">
                <div class="title">
                  <span class="fl buy-title">购物车</span>
                  <span class="fr dishes"><a href="javascript:;" @click="deleteAllShopCar" class="clear-cart"><i></i>清空菜品</a></span>
                </div>

                <ul>
                  <li class="clearfix" v-for="item in shopCarInfo.foods">
                    <div class="fl na clearfix" >{{item.foodName}}</div>
                    <div class="fl modify clearfix">
                      <a href="javascript:;" class="fl minus" @click="deleteShopCar(item)">-</a>
                      <input type="text" class="fl txt-count" v-model="item.count" maxlength="2">
                      <a href="javascript:;" class="fl plus" @click="addCountShopCar(item)">+</a>
                    </div>
                    <div class="fr pri"><span>{{item.price}}</span></div>
                  </li>
<!--                  <li class="clearfix">-->
<!--                    <div class="fl na clearfix" title="精品秘制茄子盖">精品秘制茄子盖</div>-->
<!--                    <div class="fl modify clearfix">-->
<!--                      <a href="javascript:;" class="fl minus">-</a>-->
<!--                      <input type="text" class="fl txt-count" value="1 " maxlength="2">-->
<!--                      <a href="javascript:;" class="fl plus">+</a>-->
<!--                    </div>-->
<!--                    <div class="fr pri"><span>¥16</span></div>-->
<!--                  </li>-->
                </ul>

                <div class="other-charge">
                  <div class="clearfix packing-cost">
                    <span class="fl">包装盒</span>
                    <span class="fr boxtotalprice">¥{{shopCarInfo.packCost}}</span>
                  </div>
                  <div class="clearfix delivery-cost">
                    <span class="fl">配送费(不计入起送价)</span>
                    <span class="fr shippingfee">¥{{shopCarInfo.deliveryCost}}</span>
                  </div>
                </div>

                <div class="privilege hidden"></div>
                <div class="total">共<span class="totalnumber">{{shopCarInfo.foods.length}}</span>份，共计<span class="bill fr">¥{{shopCarInfo.totalPrice}}</span></div>
              </div>
            </div>
            <p class="clearfix"></p>
            <div class="first-to-app clearfix ft12">电脑下单不享优惠了哦，优惠活动手机专享~</div>
          </div>
        </div>
        <!--评价-->
        <div class="act" id="div_2" v-show="displayPing">
          <div class="bg-white text-center pad20">
            <p class="ft30 ft-orange" style="line-height: 1">{{(commentScore.storeScore+commentScore.dishesScore+commentScore.dphScore)/3.0 | rounding }}</p>
            <p class="ft-grey8">商家评分</p>
          </div>
          <div class="bg-white mar-t1 pad20">
            <div class="center-block ft-grey8" style="width:150px; padding: 20px 0;">
              <div class="icon-stars1">
                <span class="txt">商家&nbsp;&nbsp;</span>
                <div>
                  <i :style="'width:'+commentScore.storeScore*16+'px;'"></i>
                </div>
                <span class="txt ft-orange">{{commentScore.storeScore}}</span>
              </div>
              <p class="clearfix"></p>
              <div class="icon-stars1 mar-t20">
                <span class="txt">菜品&nbsp;&nbsp;</span>
                <div>
                  <i :style="'width:'+commentScore.dishesScore*16+'px;'"></i>
                </div>
                <span class="txt ft-orange">{{commentScore.dishesScore}}</span>
              </div>


              <p class="clearfix"></p>

              <div class="icon-stars1 mar-t20">
                <span class="txt">配送&nbsp;&nbsp;</span>
                <div>
                  <i :style="'width:'+commentScore.dphScore*16+'px;'"></i>
                </div>
                <span class="txt ft-orange">{{commentScore.dphScore}}</span>
              </div>
              <p class="clearfix"></p>
            </div>
          </div>
        </div>
        <!--商家-->
        <div class="act" id="div_3" v-show="displayStore">
          <div class="bg-white pad10-20 ft-bold600">商家公告</div>
          <div class="mar-t1 ft-grey8 pad20 bg-white">
            <p>{{storeIntroduce.affiche}}</p>

          </div>
          <div class="mar-t8 bg-white pad10-20 text-center ft18 ft-grey8">举报商家</div>
        </div>
      </div>
    </div>
    <p class="hei50">&nbsp;</p>
    <!--footer-->
    <footer class="line text-center ft-grey6 ft12">
      <p class="mar-t10 mar-b20">版权所有：西南大学资产经营公司 (渝ICP 06005063号) 重庆市北碚区天生路2号 邮编：400715 </p>
    </footer>
  </div>

  </div>

</template>

<script>
  export default {
    name: "Carte",
    data() {
      return {
        storeId:"1",
        shopCarForm:{
          storeId:"1",
          packCost:"",
          deliveryCost:"",
          foods:[
          ]
        },
        shopCarInfo:{
          foods:[]
        },
        commentSize:6,
        pageSize:2,
        storeIntroduce:{

        },
        commentScore:{
          storeScore:4,
          dishesScore:5,
          dphScore:2.5
        },
        displayPing:false,
        displayStore:false,
        displayFood:true,
        sel:1,
        commentCount:"",
        storeBasicInfo: {
          dphPrice:2
        },
        pageCommentData:{
          pageSize:1,
          pageNum:5,
          total:90,
          records:[
            {
              id:2,
              score:3,
              userName:"龚超",
              userAccount:"chao",
              userPhoto:"../../static/img/user-icon.png",
              content:"真是太好吃了",
              dateTime:"2020-09-23 12:02",
              pictures: [
                "../../static/img/img-temp01.png",
                "../../static/img/img-temp02.png",
                "../../static/img/img-temp03.png"
              ],
              replay:"谢谢好评"

            },
            {
              id:2,
              score:4,
              userName:"龚超",
              userAccount:"chao",
              userPhoto:"../../static/img/user-icon.png",
              content:"真是太好吃了",
              dateTime:"2020-09-23 12:02",
              pictures: [
                "../../static/img/img-temp01.png",
                "../../static/img/img-temp02.png",
                "../../static/img/img-temp03.png"
              ],
            },
            {
              id:2,
              score:4,
              userName:"龚超",
              userAccount:"chao",
              userPhoto:"../../static/img/user-icon.png",
              content:"真是太好吃了",
              dateTime:"2020-09-23 12:02",
            }
          ]
        },
        productInfo: [
        ],
        searchData: "",
        foodsData: [
          {
            productsName:"凉菜",
            foodBasicInfos:[
              {
                id:1,
                foodName:"青椒肉丝1",
                price:23,
                coverPhoto:"../../static/img/img01.png",
                count:234
              },
              {
                id:2,
                foodName:"青椒肉丝2",
                price:23,
                coverPhoto:"../../static/img/img01.png",
                count:234
              },
              {
                id:3,
                foodName:"青椒肉丝3",
                price:23,
                coverPhoto:"../../static/img/img01.png",
                count:234
              },
            ]
          },
          {
            productsName:"热菜",
            foodBasicInfos:[
              {
                id:4,
                foodName:"鱼香肉丝1",
                price:23,
                coverPhoto:"../../static/img/img01.png",
                count:234
              },
              {
                id:5,
                foodName:"鱼香肉丝2",
                price:23,
                coverPhoto:"../../static/img/img01.png",
                count:234
              },
              {
                id:6,
                foodName:"鱼香肉丝3",
                price:23,
                coverPhoto:"../../static/img/img01.png",
                count:234
              },
            ]
          }
        ],
        productsId: "",

      }
    },
    methods: {
      selComment(el){
        this.sel=el;
        this.getCommentByStore(7,1,this.storeId);
      },
      deleteAllShopCar(){
        this.$http.post("/dietOrder/delShopCar?storeId="+this.storeId).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            this.getShopCarInfo(this.storeId);
            this.$router.go(0)
          }
        })
      },
      addCountShopCar(item){
        this.shopCarForm.storeId=this.storeId;
        this.shopCarForm.packCost=1;
        this.shopCarForm.deliveryCost=this.storeBasicInfo.dphPrice;
        for(let f of this.shopCarForm.foods){
          if(f.foodId==item.foodId){

              f.count++;

          }
        }
        this.$http.post("/dietOrder/addShopCar",this.shopCarForm).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            this.getShopCarInfo(this.storeId);
          }
        })
      },
      deleteShopCar(item){
        this.shopCarForm.storeId=this.storeId;
        this.shopCarForm.packCost=1;
        this.shopCarForm.deliveryCost=this.storeBasicInfo.dphPrice;
        for(let f of this.shopCarForm.foods){
          if(f.foodId==item.foodId){
            if(f.count>1){
              f.count--;
            }else if(f.count==1){
               let index=this.shopCarForm.foods.indexOf(f);
               this.shopCarForm.foods.splice(index, 1);
            }
          }
        }
        this.$http.post("/dietOrder/addShopCar",this.shopCarForm).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            this.getShopCarInfo(this.storeId);
          }
        })
      },
      addShopCar(item){

        this.shopCarForm.storeId=this.storeId;
        this.shopCarForm.packCost=1;
        this.shopCarForm.deliveryCost=this.storeBasicInfo.dphPrice;
        let flag=true;
        console.log(this.shopCarForm)
        for(let f of  this.shopCarForm.foods){
          //alert(f.foodId)
         // alert(item.id)
          if(item.id==f.foodId){
            flag=false;
            f.count++;
            f.price=f.price*1+item.price*1;
            break;
          }
        }
        if(flag){
          let food={
            foodId:item.id,
            foodName:item.foodName,
            count:1,
            price:item.price
          }
          this.shopCarForm.foods.push(food);
        }

        this.$http.post("/dietOrder/addShopCar",this.shopCarForm).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            this.getShopCarInfo(this.storeId);
          }
        })
      },
      changeCommentSize(){
        this.getCommentByStore(this.pageCommentData+7,1,this.storeId);
      },
      load(e){

        let scrollTop =  document.documentElement.scrollTop;
        let windowHeight =   document.documentElement.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight;
        if(scrollTop+windowHeight>=scrollHeight-1&&this.displayFood){
          if(this.pageSize<=this.pageCommentData.total)
          this.pageSize+=12;
        }

      },
      changeDiv(div){
        if(div=='div_1'){
          this.displayFood=true;
          this.displayStore=false;
          this.displayPing=false;
        }
        if(div=='div_2'){
          this.displayFood=false;
          this.displayStore=false;
          this.displayPing=true;
        }
        if(div=='div_3'){
          this.displayFood=false;
          this.displayStore=true;
          this.displayPing=false;
        }
      },
      getStoreIntroduce(id){
        this.$http.get("/storeInfo/getStoreIntroduce/"+id).then(resp=>{
          this.storeIntroduce=resp.data.data;
        });
      },
      getCommentScore(storeId){
        this.$http.get("/commentInfo/getCommentScore/"+storeId).then(resp=>{
          this.commentScore=resp.data.data;
        })
      },
      getCommentCount(storeId){
        this.$http.get("/commentInfo/getCommentCount/"+storeId).then(resp=>{
          this.commentCount=resp.data.data;
        })

      },
      getCommentByStore(pageSize,pageNum,storeId){
        this.$http.get("/commentInfo/getCommentByStore",{
          params:{
            pageSize:pageSize,
            PageNum:pageNum,
            storeId:storeId,
            sel:this.sel
          }
        }).then(resp=>{
          this.pageCommentData=resp.data.data;
        });
      },
      getStoreBasicInfo(storeId) {
        this.$http.get("/storeInfo/getStoreBasicInfoById/" + storeId).then(resp => {
          this.storeBasicInfo = resp.data.data;
        })
      },
      getProductsName(storeId) {
        this.$http.get("/productsInfo/getByStoreID/" + storeId).then(resp => {
          this.productInfo = resp.data.data;
          this.productsId=this.productInfo[0].id;
        })
      },
      getFoodVariety(pageNum, pageSize, productsId, search, storeId) {
        this.$http.get("/foodVariety/getFoodInfoByQuery", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            productsId: productsId,
            search: search,
            storeId: storeId
          }
        }).then(resp => {
          this.foodsData = resp.data.data;
        })
      },
      getShopCarInfo(id){
        this.$http.get("/dietOrder/getShopCarByStoreId/"+id).then(resp=>{
          if(resp.data.code==200){
            if(resp.data.data.foods!=null){
              this.shopCarInfo=resp.data.data;
              if(this.shopCarInfo.foods!=null){
                this.shopCarForm.foods=this.shopCarInfo.foods;
              }else{
                this.shopCarForm.foods=[];
              }
            }
          }

        })
      },
      changeProduct(id) {
        this.productsId = id;
        this.getFoodVariety(1,16,this.productsId,this.searchData,this.storeId);
      }
    },
    filters: {
      rounding(value) {
        console.log(value)
        return value.toFixed(1);
      }
    },
    mounted(){
      window.addEventListener('scroll',this.load);//绑定页面滚动事件
    },
    created() {


      this.storeId=this.$route.query.storeId;
      this.getProductsName(this.storeId);
     // this.productsId = this.productInfo[0].id;
     // alert(this.productsId)
       this.getShopCarInfo(this.storeId);
       this.getCommentScore(this.storeId);
       this.getCommentCount(this.storeId);
       this.getCommentByStore(7,1,this.storeId);
       this.getStoreBasicInfo(this.storeId);

       this.getFoodVariety(1,16,this.productsId,this.searchData,this.storeId);
       this.getStoreIntroduce(this.storeId);
    }
  }
</script>

<style scoped>

</style>
